<template>
  <div>
    <div class="showLeftChart" @click="showCharts" title="收起">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div class="echarts-box">
      <div class="title">各区县年度项目完成比例</div>
      <div
        id="cityChart"
        style="width: 800px; height: 750px; padding: 0 20px;"
      ></div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
import { projectAnnualDistStatis, projectCompleteRate } from "@/api/bigMap";

export default {
  data() {
    return {
      two: "",
      twoValueArr: [],
      three: "",
      threeValueArr: [],
      quArr: []
    };
  },
  component: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      projectAnnualDistStatis()
        .then(res => {
          this.init2();
          this.three = res.data;
          this.three.forEach(item => {
            this.quArr.push(item.regionName);
            this.threeValueArr.push(item.completedRatio);
          });
        })
        .catch(err => {});
    },
    init2() {
      projectCompleteRate().then(res => {
        this.two = res.data;
        this.two.forEach(item => {
          this.twoValueArr.push(item.completeRate);
        });
        this.$nextTick(() => {
          this.setChart();
        });
      });
    },
    setChart() {
      var myChart = echarts.init(document.getElementById("cityChart"));
      // 指定图表的配置项和数据
      var labelRight = {
        normal: {
          position: "right"
        }
      };
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["农村土地建设用地复垦", "国土综合整治"],
          orient: "vertical", //垂直显示
          y: "center", //延Y轴居中
          // x: "left", //居右显示
          right: 20
        },
        grid: {
          top: 40,
          bottom: 20,
          right: 200
          // left: 50
        },
        color: ["#639BD5", "#CFE3F7"],
        xAxis: {
          type: "value",
          position: "top",
          splitLine: { lineStyle: { type: "dashed" } },
          name: "百分比",
          max: 100
        },
        yAxis: {
          type: "category",
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: this.quArr,
          offset: 0,
          minInterval: 1,
          boundaryGap: [0, 0.1]
        },
        series: [
          {
            name: "农村土地建设用地复垦",
            type: "bar",
            barGap: 0,
            // label: labelOption,
            data: this.twoValueArr
          },
          {
            name: "国土综合整治",
            type: "bar",
            // label: labelOption,
            data: this.threeValueArr
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    showCharts() {
      this.$emit("closeCharts", 1); //关闭echart图
    }
  }
};
</script>

<style lang="scss" scoped>
.showLeftChart {
  position: absolute;
  left: -16px;
  top: 338px;
  background-color: rgba(0, 0, 0, 0.7);
  width: 16px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
}

.echarts-box {
  position: relative;
  font-size: 0;
  box-shadow: 1px 1px 2px #666;

  .title {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-54px);
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding-top: 6px;
  }
}
</style>
